#index { background:#fff;
	// header
	.index-header { @include abs(0,30px); width:1200px; height:54px; z-index:50; color:#fff; font-size:18px; line-height: 32px;

		a { color:#fff; }
		.logo { width:177px; height: auto; }    
		.nav { width:550px; margin-left: 280px; margin-top:11px;
        	li { display:inline-block; padding:0 15px; position:relative;
	            a {  display:inline-block; height:43px; 
	            	&:hover { color:$yellow; border-color:$yellow; }
	            }
	            .sun-nav { display:none; position:absolute; left:0px; top: 40px;  z-index: 100; background:#fff; text-align:center; width:100px; box-shadow:2px 2px 5px rgba(150,150,150,0.5); font-size:14px; padding:10px 0; border-radius:4px;
	                .arrow { width: 0px; height: 0px; position: absolute; top: -8px; right: 42px; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; }
	                a { display: block; border:none; color:#333; line-height:30px; height:30px;
	                    &:hover { color:$red; }
	                }
	            }
	        }
	        .service-link:hover .sun-nav { display:block; }
	    }
	    .login-btn-wrap {  width: 190px; margin-top:11px; line-height: 30px; font-size:14px;
			.reg-btn,.login-btn{float:right; border:1px solid transparent; text-align:center; margin-left:0px;width:60px;}
			.reg-btn {border-color:#fff; @extend .boxshadow; border-radius:4px; }
			.index-login{
				.sculpture{
					width: 36px;
					height: 36px;
					overflow: hidden;
					border-radius: 50%;
					img{
						width:100%;
					}
				}
				.name{
					margin-top:2px;
				}
			}
	    }
	    .user-login { position:relative;z-index:50; width: 180px; margin-top:5px; position:relative;
	        dt { font-size:16px; color:#000; 
	            .iconfont { display:inline-block; color:#000; transition:1s all ease;  }
	            img { float:left; margin-left:10px; margin-top:6px; margin-right:10px; border-radius:50%; width:32px; height:32px; }
	        }
	        &:hover { 
	            dd { display:block; border-radius: 0 0 4px 4px; box-shadow:2px 2px 5px rgba(150,150,150,0.5);}
	            dt { color:$yellow; border-radius:4px 4px 0 0; box-shadow:2px 2px 5px rgba(150,150,150,0.5); }
	            .iconfont { color:$yellow; transform:rotate(180deg); }
	        }
	    }
	}
	// banner
	.main-banner { height:820px; overflow:hidden; position:relative;
		.swiper-box { position:absolute; width:1920px; top: 0; left: -360px; height:820px; overflow:hidden; }
		.swiper-container {  }
		.swiper-slide { position:relative; width:1920px; height:820px; }
		.swiper-img img { display:block; width:1920px; height:820px; }
		.swiper-button-prev , .swiper-button-next { position:absolute; cursor: pointer; top:360px; @extend .iconfont; display:block; background:none; font-size:80px; color:#fff;  width:100px; height:100px; line-height: 100px; z-index:91; opacity:0.5;
			&:hover { opacity:1; }
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.swiper-button-next  { right:20px; }
		.swiper-button-prev  { left:20px; }
		.pagination { bottom:40px; text-align:center; width:100%; position:absolute; z-index:90; 
			span { border-radius:0; width:50px; height:8px; display:inline-block; margin:0 5px; background:#000; opacity:0.2; }
			.swiper-active-switch { background:#fff; opacity:1; }
		}
		.swiper-button-disabled { display:none; }
	}
	// reg
	.reg-box {z-index:80; position:absolute; top:160px; right:360px; width:314px; height:471px; padding:20px; background:url(../images/index/reg-bg.png) no-repeat; color:#fff;
		h4 { font-size:28px; line-height: 40px; text-align:center; }
		.reg-form { font-size:14px;
			dl {  @extend .clearfloat; height:60px;
				dt { float:left; width:36px; line-height: 60px; height:60px;
					i { font-size:30px; }
				}
				dd { border-bottom:1px solid #f49fa6; padding:15px 0; float:right; width:270px; height:29px; position:relative; 
					::-webkit-input-placeholder { color:#fff; }
					:-moz-placeholder { color:#fff; }
					::-moz-placeholder { color:#fff; }
					:-ms-input-placeholder { color:#fff; }
					.input { display:block;  border:none; padding:0; height:30px; line-height: 30px; width:100%;  background:none; color:#fff; font-size:14px; }
					.input-short { width:150px; }
					.img-code ,.message-code { position:absolute; top: 15px; right:0px; width:100px; height:30px;  
						img { display:block; width:100%; height: 100%; }
					}
					.message-code a { display:block; text-align: right; color:$yellow; font-size:14px; background:none; border:none; 
						
					}
				}
			}
			.agreement { line-height: 20px; margin:25px auto; @extend .clearfloat; line-height: 20px; 
				label { float:left; width:30px; height:20px; }
				span { float:left; 
					a { color:#fff; 
						&:hover { color:$yellow; }
					}
				}
			}
			.submit { background: #fff; border-radius:4px; width:100%; display:block; line-height:44px; text-align:center; color:$red; font-size:18px; box-shadow:2px 2px 5px rgba(0,0,0,0.1); 
				&:hover { }
			} 
		}
								
	}
	
	// mod-01
	.mod-01 { background:#f9f9f9; padding:30px 0;
		ul { @extend .clearfloat; }
		li { float:left; width:399px; border-right:1px solid #dedede;  padding:10px 0;
			&.last { border:none; }
			.icon { float:left; width:82px; height:60px; }
			.i1 { width:60px; background-position:0 -100px; }
			.i2 { margin-left:80px; background-position:-100px -100px; }
			.i3 { margin-left:150px; width:72px; background-position:-200px -100px; }
			.text { float:left; margin-left:10px; font-size:16px;  color: #999; line-height:1.5; width:160px;
				h4 { font-size:22px; color: #444; }
			}
		}
	}
	// mod-02
	.mod-02 { padding:45px 0; 
		ul { @extend .clearfloat; }
		li { position:relative; float:left; margin-right:54px; width:362px; border:1px solid #e8e8e8; border-radius:4px; 
			&:nth-of-type(2) .top-class { background-position:-362px 0; }
			&:last-of-type { margin-right:0; 
				.top-class { background-position:-724px 0;  }
			}
			.top-class { background:url(../images/index/bg-01.png) no-repeat; height:95px; color:#fff; font-size:16px; line-height: 1.8; padding:16px 0 0 30px;
				h4 { font-size:28px; }
				i { position:absolute; right:20px; top: 30px; font-size:30px; transition: all .3s ease 0s; }
				&:hover i { transform:translateX(10px); }
			}
			.invest-de { padding:35px 0; line-height: 2; text-align:center;
				h4 { font-size:26px; color:#666; text-align:center; }
				.yield { color:$red; font-size:40px; line-height: 100px; 
					em { font-size:80px; }
				}
				.impose {  @extend .clearfloat; line-height: 30px; padding:0 10px;
					span { float:left; width:33%; font-size:14px; color:#999;
						i { color:#97c0ff; font-size:16px; margin-right:5px; }
					}
				}
				a { position:relative; border:1px solid $red; font-size:24px; color:$red; line-height:50px; display:block; width:280px; margin:0 auto; border-radius:26px; margin-top:30px; transition: all .3s ease 0s; overflow:hidden; z-index:1; @extend .ie-radius; background:#fff;
					&:after { content: ""; position: absolute; background: none repeat scroll 0 0 $red; height: 0%; left: 50%; top: 50%; width: 100%; z-index: -1; transform: translateX(-50%) translateY(-50%) rotate(-45deg); transition: all .3s ease 0s; }				
					&:hover { color:#fff; }
					&:hover:after { height: 500%; }
				}
			}
		}
	}	
	// mod-03 
	.mod-title { text-align:center; font-size:18px; color:#666; line-height: 1.5; padding-top:40px; color:#999;
		h4 { font-size:36px; color:#000; }
		em { color:$red; }
		.line { margin:10px auto; width:360px; background: #e4e4e4; height:1px;
			span { display:block; margin:0 auto; background:$red; width:100px; height:1px; }
		}
	}
	.mod-03 { height:915px; background:url(../images/index/bg.jpg) no-repeat center center; 
		ul { @extend .clearfloat; 
			li { float:left; width:500px; padding:30px 40px; height:135px; background:#fff; border-radius:4px; line-height: 2; font-size:14px; color:#999; margin-top:40px; margin-left:30px; box-shadow:1px 1px 5px rgba(0,0,0,0.1);
				&:nth-of-type(2n+1) { margin-left:0; }
				.icon { float:left; width:73px; height:92px; margin-right:40px; margin-left:10px; margin-top:20px;}
				.i1 { background-position:0 0; }
				.i2 { background-position:-100px 0; }
				.i3 { background-position:-200px 0; }
				.i4 { background-position:-300px 0; }
				.i5 { background-position:-400px 0; }
				.i6 { background-position:-500px 0; }
				.text { float:left; width:370px; }
				h4 { font-size:18px; color:#666; }
			}
		}
	}
	// mod-04
	.mod-04 { padding-bottom:60px;
		.rate-list { @extend .clearfloat; text-align:center; margin-top:70px;
			li { float:left; width:25%; font-size:16px; color:#444; 
				.rate { border:2px solid $red; width:150px; height:30px; padding:60px 0; color:#666; border-radius:77px; margin:0 auto; background:#fff; @extend .ie-radius;
					em { font-size:24px; display:block; color:$red; }
					b { font-size:40px; }
				}
				p { margin-top:20px; }
			}
		}
		.notes { margin-top:40px; line-height: 40px; font-size:16px; margin-left: 65px;
			h4 { height:60px; width:104px; background-position:0 -200px; margin-bottom:20px; }
		}
	}
	// mod-05
	.mod-05 { height:480px; background:url(../images/index/bg.jpg) no-repeat center center; 
		.news-recommend { @extend .clearfloat; font-size:14px; margin-top:40px;
			dl { float:left; width:360px; margin-right:60px;
				&:nth-of-type(3) { margin-right:0; }
				dt { color:#444444; border-bottom:1px solid #c6c6c6; line-height: 50px; font-size:20px;
					a { float:right; color:#999; font-size:16px; 
						&:hover { color:$red; }
					}
				}
				dd { padding-top:10px; line-height: 40px; 
					a { display:block;  color:#999999;
						span:nth-of-type(1) { float:left; width:260px; @extend .textover;}
						span:nth-of-type(2) { float:right; }
						&:hover { color:$red; }
					}
				}
			}
		}
	}
}	






